<template>
  <div
    :ref="info._id"
    v-ui-ref="vSetRef"
    class="board-box w-full h-full flex justify-between items-center relative"
    :class="[
      'mt-' + (extension.topMargin && extension.topMargin.value),
      'mr-' + (extension.rightMargin && extension.rightMargin.value),
      'mb-' + (extension.bottomMargin && extension.bottomMargin.value),
      'ml-' + (extension.leftMargin && extension.leftMargin.value),
    ]"
    :style="[
      {
        'background-color': extension.bgColor && extension.bgColor.value,
        'border-radius': (extension.radius && extension.radius.value) + 'px',
        width: (extension.boxInnerWidth && extension.boxInnerWidth.value) + 'px',
        height: (extension.boxInnerHeight && extension.boxInnerHeight.value) + 'px',
        'padding-top': (extension.topPadding && extension.topPadding.value) + 'px',
        'padding-right': (extension.rightPadding && extension.rightPadding.value) + 'px',
        'padding-bottom': (extension.bottomPadding && extension.bottomPadding.value) + 'px',
        'padding-left': (extension.leftPadding && extension.leftPadding.value) + 'px',
      },
    ]"
  >
    <div
      class="flex title-box"
      :style="{
        color: extension.titleColor && extension.titleColor.value,
        'font-size': (extension.titleSize && extension.titleSize.value) + 'px',
        top: (extension.titleTop && extension.titleTop.value) + '%',
      }"
    >
      <h1>{{ extension.titleText && extension.titleText.value }}</h1>
    </div>
    <div class="flex items-baseline">
      <h3
        class="mr-4"
        :style="{
          'font-size': extension.warehouseSize && extension.warehouseSize.value + 'px',
          color: extension.warehouseColor && extension.warehouseColor.value,
        }"
      >
        {{ nowWareHoseInfo.DESCRC }}:
      </h3>
      <ul class="flex">
        <li
          v-for="(item, i) in extension.subTitle.value"
          :key="i"
          class="subtitle mr-3"
          :style="{ 'font-size': extension.sideTextSize && extension.sideTextSize.value + 'px', color: item.textColor }"
        >
          {{ item.left }}
          <span :style="{ 'font-size': extension.highlightSize && extension.highlightSize.value + 'px', color: item.highlightColor }">
            {{ dataList.length ? dataList[0][item.key] : '' }}
          </span>
          {{ item.right }}
        </li>
      </ul>
    </div>
    <div class="flex" :style="{ 'font-size': extension.tagText && extension.tagText.value + 'px' }">
      <div
        v-for="(item, i) in filterList"
        :key="i"
        class="box"
        :class="{ active: status == item.key }"
        :style="{
          'background-color': item.bgColor,
          width: item.width + 'px',
          color: item.textColor,
          'margin-right': extension.tagClearance && extension.tagClearance.value + 'px',
        }"
        @click="choosed(item, i)"
      >
        {{ item.text }}
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  export default defineComponent({
    name: 'UiWarehouseTitle',
    components: {},
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        filterList: this.info.extension.tagList.value,
        status: null,
        dataList: [],
        nowWareHoseInfo: { DESCRC: '' },
      }
    },
    computed: {
      extension() {
        return this.info.extension
      },
    },
    watch: {
      info: {
        handler() {
          this.$nextTick(() => {
            this.infoComponent = cloneDeep(this.info)
            this.getRequestData()
          })
        },
        deep: true,
        immediate: true,
      },
    },
    created() {
      let warehouseList = this.$store.getters['user/warehouseList']
      let getWareHoseId = this.$store.getters['user/wareHoseId']
      this.nowWareHoseInfo = getWareHoseId ? warehouseList.find((v) => v.WAREHOUSE_ID === getWareHoseId) : ''
    },
    methods: {
      choosed(item) {
        this.status = this.status == item.key ? null : item.key
        this.vuiComponents[this.info._id]?.self?.onChange()
      },
      getRequestData() {
        this.$request(this.infoComponent.extension.requestSet.value, (res) => {
          this.dataList = cloneDeep(res)
        })
      },
    },
  })
</script>

<style lang="scss" scoped>
  .board-box {
    min-height: 20px;
    .title-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    h3 {
      color: #81bfe7;
      font-size: 20px;
      font-weight: bold;
    }
    .subtitle {
      font-size: 15px;
      color: #709ec5;
      span {
        font-size: 20px;
        color: #fff;
        font-weight: bold;
        margin: 0 4px;
      }
    }
    .box {
      color: #fff;
      border-radius: 3px;
      // background-color: #1f489a;
      padding: 5px 8px;
      cursor: pointer;
      opacity: 0.8;
      text-align: center;
      &:last-child {
        margin-right: 0 !important;
      }
      &.active {
        opacity: 1;
      }
    }
  }
</style>
